<template>
  <div class="about">
      
      
       <van-nav-bar title="购物车" left-text="返回" right-text="编辑" left-arrow  @click-left="onClickLeft"
  @click-right="onClickRight">
        </van-nav-bar>
     
      
      
      <div v-if='this.shoplist.length>0'>
          <div v-for="list in this.shoplist" >
            <van-card
                :num="list.number"
                :price="list.price"
                :desc="list.text"  
                :title="list.name"
                :thumb="list.img[0]"
            >
            <div slot="footer">
                <van-button size="mini" @click="reduce111(list)">－</van-button>
                <van-button size="mini" @click="increase(list)">＋</van-button>
            </div>
            </van-card>
        </div>
         <van-submit-bar
            :price='totals'
            button-text="提交订单"
        />
      </div>
      <div class="aimg" v-else>
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555677207&di=d09df0169b213cfe3aa7194739b62986&imgtype=jpg&er=1&src=http%3A%2F%2Fm.hua.com%2Fimages%2Fgwc_k.png" alt="">
      </div>
       
       
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import {mapActions} from 'vuex'
import { constants } from 'fs';
import { SSL_OP_MSIE_SSLV2_RSA_PADDING } from 'constants';
import {Toast} from 'vant';
Vue.use(Toast)
export default {

    
     computed:{
            ...mapGetters([
                'shoplist',
            ]),
            totals(){
                // console.log(this.shoplist) 
                 var a=0  
                for(var i=0;i<this.shoplist.length;i++){
                  a+=this.shoplist[i].price*this.shoplist[i].number
                  
                }    
                  return a*100
                }
            },
    methods:{
        ...mapActions([
                'increase',
                'reduce'
            ]),
            onClickLeft(){
                this.$router.push({path:'/'});
            },
            onClickRight(){
                
            },
            reduce111(list){
                console.log(list)
                if(list.number>1){
                     this.reduce(list) 
                }else{
                    Toast('商品数量不能少于1')
                }
               
            }

    }   
}    
</script>
<style scoped>
    .aimg img{
        width:355px;
        heigth:100px
    }
</style>
